<script setup lang="ts">

import type {Ref} from "vue-demi";
import {
  type ActiveDto,
  addActive,
  delActiveInstanceFile,
  type OssFile,
  putActive,
  uploadActiveImg
} from "@/apis/active";
import {useUserStore} from "@/stores";
import type {img} from "@/components/ImgUpload/index.vue";
import MediaSelect, {type Media} from "@/components/MediaSelect/index.vue";
import { Modal } from '@arco-design/web-vue';
import {addTableColumn, delTableColumn, getColumn, type TableColumnDto} from "@/apis/active/table/column";
import {useDict} from "@/hooks/app";
import { Message } from '@arco-design/web-vue';
import {addActiveTable, getTableIdByActiveId, type tableDto} from "@/apis/active/table";
import {type OssFileVo, uploadSmall} from "@/apis/oss";
import {
  addParticipant,
  delParticipant,
  getParticipantsByActiveId,
  type ParticipantsDto
} from "@/apis/active/participants";

const emit = defineEmits(["ok"])
const isImgUploaded = ref(false)


const events = [
  {
    id: 1,
    name: "活动信息",
    description:"填写活动基本信息",
    cancelText: "取消",
    okText: "下一步",
    loading: false,
    eventOk: () => {

      if (activeDto.value.activeTitle === "") {
        Message.error({
          content: "请填写活动标题"
        })
        return
      }

      if (activeDto.value.activeStartTime === "") {
        Message.error({
          content: "请填写活动开始时间"
        })
        return
      }

      if (activeDto.value.activeDeadline === "") {
        Message.error({
          content: "请填写活动结束时间"
        })
        return
      }

      if (activeDto.value.activeAddr === "") {
        Message.error({
          content: "请填写活动地点"
        })
        return
      }

      if (activeDto.value.activeLabel?.length === 0) {
        Message.error({
          content: "请填写活动标签"
        })
        return
      }



      curEvent.value++
    },
    eventCancel: () => {
      visible.value = !visible.value
    }
  },
  {
    id: 2,
    name: "活动实例",
    description:"填写活动详情信息",
    cancelText: "上一步",
    okText: "下一步",
    loading: false,
    eventOk: async () => {
  
      // if (activeDto.value.activeAim === "") {
      //   Message.error({
      //     content: "请填写活动目的"
      //   })
      //   return
      // }
  
      // if (activeDto.value.activeTrip.length === 0) {
      //   Message.error({
      //     content: "请填写活动流程"
      //   })
      //   return
      // }
  
      // for (let i = 0; i < activeDto.value.activeTrip.length;i++) {
      //   if (activeDto.value.activeTrip[i].content === "") {
      //     Message.error({
      //       content: "请填写活动流程"
      //     })
      //     return
      //   }
  
      //   if (activeDto.value.activeTrip[i].time === "") {
      //     Message.error({
      //       content: "请填写活动流程时间"
      //     })
      //     return
      //   }
  
      // }
  
  
      startLoading()
  
      if (activeDto.value.id === 0) {
        let tempDTO:ActiveDto = {
          activeTitle: '',
          activeStartTime: '',
          activeDeadline: '',
          activeAddr: '',
          activePrice: 0,
          activeLabel: [],
          activeTrip: [],
          activeTargetGroup: '',
          activeRegisterDeadline: '',
          activeLimit: 0,
          updateBy: '',
          status: 3,
          activeHeadImg: '',
          activeInstance: '',
          instanceOssIds: ''
        };
  
  
        Object.assign(tempDTO, activeDto.value)
  
        //@ts-ignore
        tempDTO.activeLabel = tempDTO.activeLabel!.join(",")
        tempDTO.activeTrip = JSON.stringify(tempDTO.activeTrip)
  
  
        await addActive(tempDTO).then(res => {
          activeDto.value.id = res.data.data
        })
      }
  
      table.activeId = activeDto.value.id + ""
      table.tableName = activeDto.value.activeTitle + "活动人员信息表"
      table.updateBy = activeDto.value.updateBy
  
      if (table.id === "0") {
        await getTableIdByActiveId(table.activeId).then(res => {
          table.id = res.data.data + ""
        })
      }
  
  
      if (table.id === "0") {
        await addActiveTable(table).then(res => {
          table.id = res.data.data
        })
      }
  
  
      if (formColumns.value.length === 0) {
        await getColumn(table.id).then(res => {
          if (res.data.data != null) {
            formColumns.value = res.data.data
  
            formColumns.value.forEach(i => {
              i.optionValue = i.optionValue?.split(",")
            })
  
          }
        })
      }
  
  
  
      columnData.value.tableId = table.id
  
  
      endLoading()
      curEvent.value++
  
    },
    eventCancel: () => {
      curEvent.value--
    }
  },
  {
    id: 3,
    name: "人员信息",
    description:"报名表单数据",
    cancelText: "上一步",
    okText: "下一步",
    loading: false,
    eventOk: async () => {

      if (activeDto.value.activeTargetGroup === "") {
        Message.error({
          content: "请填写活动目标人群"
        })
        return
      }

      if (activeDto.value.activeRegisterDeadline === "") {
        Message.error({
          content: "请填写活动报名截止日期"
        })
        return
      }

      if (activeDto.value.activeLimit === 0) {
        Message.error({
          content: "活动限制人数不能为0"
        })
        return
      }

      if (formColumns.value.length === 0) {
        Message.error({
          content: "至少有一个表单信息"
        })
        return
      }


      await save()

      if (imgs.value.length === 0) {

        if (activeDto.value.activeHeadImg === "") {
          activeDto.value.activeHeadImg = []
        }

        //@ts-ignore
        activeDto.value.activeHeadImg?.forEach((i:OssFile) => {
          imgs.value.push({
            id: i.ossId,
            src: import.meta.env.VITE_API_BASE_URL + i.clientUrl,
            isNow:false
          })
        })
      }

      if (medias.value.length === 0) {

        if (activeDto.value.activeInstance === "") {
          activeDto.value.activeInstance = []
        }

        //@ts-ignore
        activeDto.value.activeInstance?.forEach((i:OssFileVo) => {
          medias.value.push({
            id: i.ossId,
            src: import.meta.env.VITE_API_BASE_URL + i.clientUrl,
            isVideo: i.fileType === "mp4" || i.fileType === "avi" || i.fileType === "m4v",
            isPre: true,
            isUpload: true
          })
        })
      }




      curEvent.value++
    },
    eventCancel: () => {
      curEvent.value--
    }
  },
  {
    id: 4,
    name: "完善活动",
    description:"添加视频或图片",
    cancelText: "上一步",
    okText: "下一步",
    loading: false,
    eventOk: async () => {

      if (imgs.value.length === 0) {
        Message.error({
          content:"至少有一个活动大图"
        })
        return
      }

      if (!isImgUploaded.value) {
        Message.error({
          content: "请先上传活动大图"
        })
        return
      }

      if (medias.value.length === 0) {
        Message.error({
          content: "至少有一个活动实例"
        })
        return
      }


      if (participants.value.other.length === 0) {
        await getParticipantsByActiveId(activeDto.value.id + "").then(res => {
          let list = res.data.data as Array<ParticipantsDto>

          list.forEach(i => {
            let temp = {
              id: i.id + "",
              name: i.participantsName + "",
              src: import.meta.env.VITE_API_BASE_URL + i.clientUrl + "",
              ossId: i.participantsAvatar + ""
            }

            //@ts-ignore
            participants.value.other.push(temp);
          })

        })
      }





      curEvent.value++
    },
    eventCancel: () => {
      curEvent.value--
    }
  },
  {
    id: 5,
    name: "完成",
    description: "完成活动添加",
    cancelText: "上一步",
    okText: "完成",
    loading: false,
    eventOk: () => {

      Modal.info({
        title: "提交活动",
        content: "提交活动，活动信息将被修改，是否修改？",
        okText: "立即提交",
        cancelText:"再想想",
        onOk: async (e) => {
          await save()
          formColumns.value = []
          curEvent.value = 1
          table.id = "0"
          emit("ok")
          visible.value = !visible.value
          clearData()
        }
      })


    },
    eventCancel: () => {
      curEvent.value--
    }
  }
]

const curEvent = ref(1);

const imgs:Ref<img[]> = ref([])

const medias:Ref<Media[]> = ref([])

const props = defineProps({
  title: {
    type: String,
    default: "活动"
  }
})

const visible = defineModel("visible", {
  type: Boolean
})

const activeDto:Ref<ActiveDto> = defineModel("dto",{
  type: Object,
  default: {
    id: 0,
    activeTitle: "",
    activeStartTime: "",
    activeDeadline: "",
    activeAddr: "",
    activeHeadImg: "",
    activeInstance: "",
    instanceOssIds: "",
    activeLabel: [],
    activePrice: 0,
    activeOriginPrice:0,
    activeAim: "",
    activeTrip: [{
      id: new Date().toString(),
      time: "",
      content: "内容",
      order: 1
    }],
    activeTargetGroup: "",
    activeRegisterDeadline: "",
    activeLimit: 1,
    updateBy: useUserStore().userInfo.id,
    status: 3
  }
})

/**
 * 数据表信息
 */
const table: tableDto = {
  id: '0',
  activeId: '',
  tableName: '',
  updateBy: '',
  status: 1
}

/**
 * 表单列表
 */
const formColumns:Ref<TableColumnDto[]> = ref([])

/**
 *
 * 表单数据
 */
const columnData:Ref<TableColumnDto> = ref({
  columnId: new Date().toString(),
  id: 0,
  tableId: table.id,
  tableColumnName: '',
  tableColumnType: '',
  placeholder: '',
  optionValue: [],
  inputType: '',
  updateBy: useUserStore().userInfo.id,
  status: 0
})

/**
 * 嘉宾信息
 */
const participants = ref({
  main: {
    name: "",
    src: "",
    file: ""
  },
  other: [

  ]
})

/**
 * 嘉宾信息数据
 */
const otherInfo = ref({
  id: new Date().toString(),
  name: "",
  src: "",
  ossId: ""
})


/**
 * 保存草稿
 */
const save = async () => {
  //@ts-ignore
  activeDto.value.activeLabel = activeDto.value.activeLabel?.join(",")
  activeDto.value.activeTrip = JSON.stringify(activeDto.value.activeTrip)
  activeDto.value.updateBy = useUserStore().userInfo.id

  await putActive(activeDto.value).then(res => {

  })
  //@ts-ignore
  activeDto.value.activeLabel = activeDto.value.activeLabel?.split(",")
  activeDto.value.activeTrip = JSON.parse(activeDto.value.activeTrip)
}

/**
 * 启动加载事件
 */
const startLoading = () => {
  events[curEvent.value - 1].loading = true
}

/**
 * 结束加载事件
 */
const endLoading = () => {
  events[curEvent.value - 1].loading = false
}

/**
 * 点击ok按钮的事件
 */
const clickOkHandler = () => {
  events[curEvent.value - 1].eventOk()
}

/**
 * 点击取消按钮的事件
 */
const clickCancelHandler = () => {
  events[curEvent.value - 1].eventCancel()
}

/**
 * 选择图片
 */
const selectImgHandler = (data:Ref<img[]>) => {
  imgs.value = data.value
}

/**
 * 删除图片
 */
const delImgHandler = (data: Ref<img[]>) => {
  imgs.value = data.value
}

/**
 * 上传图片
 */
const uploadImgHandler = () => {

  let formData = new FormData();
  let oldOssIds = ""

  for (let i = 0; i < imgs.value.length; i++) {

    if (!imgs.value[i].isNow) {
      oldOssIds += imgs.value[i].id + ","
    } else {
      formData.append("img", imgs.value[i].file, imgs.value[i].fileName)
    }

  }

  if (formData.get("img") == null) {

    formData.append("img", new Blob())
  }


  formData.append("id", activeDto.value.id + "")
  formData.append("ossIds", oldOssIds)
  formData.append("userId", useUserStore().userInfo.id + "")

  uploadActiveImg(formData).then(res => {
      isImgUploaded.value = true
      Message.success("上传成功")
  })

}

/**
 * 选择媒体
 * @param data
 */
const selectMedia = (data: Ref<Media[]>) => {
  medias.value = data.value

  let ossIds = "";

  for (let i = 0; i < medias.value.length; i++) {
    ossIds += medias.value[i].id + ","
  }

  ossIds.substring(ossIds.length - 1, ossIds.length);

  activeDto.value.instanceOssIds = ossIds

  save()

}

/**
 * 删除媒体
 * @param data
 */
const delMedia = (data: Media) => {
  for (let i = 0; i < medias.value.length; i++) {
    if (medias.value[i].id === data.id) {
      medias.value.splice(i, 1)
      break
    }
  }
  delActiveInstanceFile(activeDto.value.id as number,
      useUserStore().userInfo.id + "",
      data.id + "").then(res => {
  })
}


/**
 * 关闭model
 */
const closeModel = () => {

  //清除缓存
  clearData()

}

/**
 * 清除缓存
 */
const clearData = () => {
  formColumns.value = []
  curEvent.value = 1
  table.id = "0"
  activeDto.value.activeTitle = ""
  activeDto.value.activeInstance = []
  activeDto.value.activeTrip = []
  activeDto.value.activeLimit = 0
  activeDto.value.activePrice = 0.00
  activeDto.value.activeOriginPrice = 0.00
  activeDto.value.activeAim = ""
  activeDto.value.activeDeadline = ""
  activeDto.value.activeStartTime = ""
  activeDto.value.status = 3
  activeDto.value.activeTargetGroup = ""
  activeDto.value.activeInstance = []
  activeDto.value.activeHeadImg = []
  activeDto.value.activeLabel = []
  activeDto.value.activeAddr = ""
  activeDto.value.instanceOssIds = ""
  imgs.value = []
  medias.value = []
  participants.value.other = []
}

/**
 * 添加表单
 */
const addColumn = async () => {

  if (columnData.value.tableColumnName === '') {
    Message.error("请输入表单名称")
    return
  }

  if (columnData.value.tableColumnType === '') {
    Message.error("请选择表单值类型")
    return
  }

  if (columnData.value.inputType === '') {
    Message.error("请选择表单输入类型")
    return
  }

  if (columnData.value.inputType != '0' && columnData.value.optionValue!.length == 0) {
    Message.error("请输入表单选项值")
    return
  }

  //@ts-ignore
  columnData.value.optionValue = columnData.value.optionValue?.join(",")
  columnData.value.id = table.id
  await addTableColumn(columnData.value).then(res => {
    columnData.value.id = res.data.data
  })

  //@ts-ignore
  columnData.value.optionValue = columnData.value.optionValue?.split(",")
  formColumns.value.push(columnData.value)
  columnData.value = {
    columnId: new Date().toString(),
    id: 0,
    tableId: table.id,
    tableColumnName: '',
    tableColumnType: '',
    placeholder: '',
    optionValue: [],
    inputType: '',
    updateBy: useUserStore().userInfo.id,
    status: 0
  }
}

/**
 * 删除表单
 * @param data
 */
const delColumn = (data:TableColumnDto) => {
  for (let i = 0; i < formColumns.value.length; i++) {
    if (formColumns.value[i].id === data.id) {
      delTableColumn(data.id + "").then(res => {
        formColumns.value.splice(i, 1)
      })
      break
    }
  }
}

/**
 * 选择主办方头像
 */
// const selectMainAvatar = () => {
//
//   const input = document.createElement("input")
//   input.type = "file"
//   input.accept = "image"
//
//   input.onchange = (e) => {
//
//     //@ts-ignore
//     const file = e.target!.files[0]
//     console.log(file)
//
//     let formData = new FormData()
//
//     formData.append("file", file)
//     formData.append("userId", useUserStore().userInfo.id)
//     formData.append("subject", "ParticipantsImg")
//
//     uploadSmall(formData).then(res => {
//       let data = res.data.data as OssFileVo
//       participants.value.main.src = import.meta.env.VITE_API_BASE_URL + data.clientUrl
//       participants.value.main.file = data.ossId
//     })
//
//   }
//
//   input.click()
//
// }
//
// /**
//  * 上传主办方信息
//  */
// const uploadMainInfo = () => {
//
// }


/**
 * 选择嘉宾头像
 */
const selectOtherAvatar = () => {
  const input = document.createElement("input")
  input.type = "file"
  input.accept = "image/png,image/jpeg,image/jpg"

  input.onchange = (e) => {

    //@ts-ignore
    const file = e.target!.files[0]

    let formData = new FormData()

    formData.append("file", file)
    formData.append("userId", useUserStore().userInfo.id)
    formData.append("subject", "ParticipantsImg")

    uploadSmall(formData).then(res => {
      let data = res.data.data as OssFileVo
      otherInfo.value.src = import.meta.env.VITE_API_BASE_URL + data.clientUrl
      otherInfo.value.ossId = data.ossId
    })

  }

  input.click()
}

/**
 * 新增嘉宾
 */
const addParticipants = async () => {

  if (otherInfo.value.name === '') {
    Message.error({
      content:"请输入嘉宾名称"
    })
    return
  }


  if (otherInfo.value.src === '') {
    Message.error({
      content:"请选择嘉宾头像"
    })
    return
  }



  const participant :ParticipantsDto = {
    id: '',
    activeId: activeDto.value.id + "",
    participantsName: otherInfo.value.name,
    participantsAvatar: otherInfo.value.ossId,
    isMain: 0,
    updateBy: useUserStore().userInfo.id,
    status: 1
  }

  await addParticipant(participant).then(res => {
    otherInfo.value.id = res.data.data
  })

  //@ts-ignore
  participants.value.other.push(otherInfo.value)

  otherInfo.value = {
    id: new Date().toString(),
    name: "",
    src: "",
    ossId: ""
  }



}

/**
 * 移除嘉宾
 */
const delParticipants = (info) => {
  for (let i = 0; i < participants.value.other.length; i++) {
    //@ts-ignore
    if (participants.value.other[i].id === info.id) {
      participants.value.other.splice(i, 1)
      delParticipant(info.id)
      return
    }
  }

}



</script>

<template>
  <a-modal v-model:visible="visible" :title="title" width="1500px"
           :draggable="true"
           @cancel="closeModel" >
    <a-steps label-placement="vertical" :current="curEvent" >
      <a-step v-for="i in events" :description="i.description">{{i.name}}</a-step>
    </a-steps>

    <a-divider/>

    <div v-if="curEvent == 1" >
      <a-form :model="activeDto">

        <a-form-item label="活动标题">
          <a-input v-model="activeDto.activeTitle"></a-input>
        </a-form-item>

        <a-row justify="end">

          <a-col :span="11">
            <a-form-item label="活动开始时间">
              <a-date-picker v-model="activeDto.activeStartTime" />
            </a-form-item>
          </a-col>

          <a-col :span="10">
            <a-form-item label="活动结束时间">
              <a-date-picker v-model="activeDto.activeDeadline" />
            </a-form-item>
          </a-col>

        </a-row>

        <a-form-item label="活动地点">
          <a-input v-model="activeDto.activeAddr"></a-input>
        </a-form-item>

        <a-form-item label="活动标签">
          <a-input-tag v-model="activeDto.activeLabel" />
        </a-form-item>

        <a-form-item label="活动门票价格">
          <a-input-number v-model="activeDto.activePrice" :precision="2" />
        </a-form-item>

        <a-form-item label="活动原门票价格">
          <a-input-number v-model="activeDto.activeOriginPrice" :precision="2" />
        </a-form-item>

      </a-form>
    </div>

   <div v-if="curEvent == 2" class="box" >

     <!-- <div  class="pre">
       <h3>活动流程</h3>
       <a-timeline >
         <a-timeline-item v-for="i in activeDto.activeTrip" :label="i.time">{{i.content}}</a-timeline-item>
       </a-timeline>
     </div> -->

     <a-form :model="activeDto" >
       <a-form-item label="活动介绍">
         <a-textarea v-model="activeDto.activeAim" :max-length="254" allow-clear show-word-limit/>
       </a-form-item>

       <!-- <a-form-item label="增加流程">
         <a-button type="outline" shape="circle" @click="activeDto.activeTrip.push({
                id: new Date().toString(),
                time: '',
                content: '',
                order: 1
            })">
           <icon-plus />
         </a-button>
      </a-form-item> -->

       <!-- <a-form-item label="活动流程" v-for="i in activeDto.activeTrip" :key="i.id">

         <a-row :gutter="24">

           <a-col :span="12">
            
             <a-form-item label="时间">
               <a-date-picker v-model="i.time" show-time  />
             </a-form-item>
           </a-col>

           <a-col :span="12">
             <a-form-item label="内容">
               <a-input v-model="i.content" placeholder="请输入活动流程内容" />
             </a-form-item>
            </a-col>

         </a-row>

        </a-form-item> -->

     </a-form>

   </div>

    <div v-if="curEvent == 3" class="box">

      <div class="pre">

          <h3>预览表单</h3>

          <br/>

          <a-form auto-label-width>

            <a-form-item v-for="i in formColumns" :label="i.tableColumnLabel">


              <a-input v-if="i.inputType === '0'" :placeholder="i.placeholder" />

              <a-select v-if="i.inputType === '1'" :placeholder="i.placeholder" :options="i.optionValue" />

              <a-select v-if="i.inputType === '2'" :placeholder="i.placeholder" :options="i.optionValue" multiple />

              <a-button status="danger">
                <IconClose @click="delColumn(i)"/>
              </a-button>


            </a-form-item>

          </a-form>
      </div>

      <a-form :model="activeDto">

        <a-form-item label="活动目标人群">
          <a-textarea v-model="activeDto.activeTargetGroup" :max-length="254" show-word-limit />
        </a-form-item>

        <a-form-item label="报名截止日期">
          <a-date-picker v-model="activeDto.activeRegisterDeadline" show-time />
        </a-form-item>

        <a-form-item label="人数限制">
          <a-input-number v-model="activeDto.activeLimit" :min="1" :step="1" />
        </a-form-item>

        <a-form-item label="表单配置">

          <a-row >

            <a-col :span="12">
              <a-form-item label="字段名称">
                <a-input placeholder="字段名称,建议填英文" v-model="columnData.tableColumnName" />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="字段标签">
                <a-input placeholder="填写字段标签" v-model="columnData.tableColumnLabel" max-length="5" show-word-limit />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="字段值类型">
                <a-select placeholder="字段值类型" v-model="columnData.tableColumnType" >
                  <a-option value="0">字符串</a-option>
                  <a-option value="1">数字</a-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="输入方式">
                <a-select placeholder="单选 文本框 多选" v-model="columnData.inputType"  >
                  <a-option value="2">多选框</a-option>
                  <a-option value="1">单选框</a-option>
                  <a-option value="0">文本框</a-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="输入框提示">
                <a-input placeholder="请填写输入框提示" v-model="columnData.placeholder" />
              </a-form-item>
            </a-col>

            <a-col :span="12" v-if="columnData.inputType != '' && columnData.inputType != '0'">
              <a-form-item label="可选值">
                <a-input-tag placeholder="请填写选项框的可选值" v-model="columnData.optionValue" />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="添加" >
                <a-button shape="circle" @click="addColumn">
                  <icon-plus />
                </a-button>
              </a-form-item>
            </a-col>

          </a-row>


        </a-form-item>



      </a-form>

    </div>

    <div v-if="curEvent == 4">
      <a-form :model="activeDto">

        <a-form-item label="活动大图">
          <img-upload :src="imgs" @imgs="selectImgHandler" @delImg="delImgHandler"  />
          <a-button type="text" @click="uploadImgHandler">上传</a-button>
        </a-form-item>


        <a-form-item label="活动实例">
          <MediaSelect @selectMedia="selectMedia" @delMedia="delMedia" :mediaSrc="medias"  />
        </a-form-item>

      </a-form>

    </div>

    <div v-if="curEvent == 5" class="box">

      <div class="pre">

<!--        <h3>预览嘉宾</h3>-->

<!--        <br/>-->

<!--        <div class="info" >-->

<!--          <div class="info-item" v-for="i in participants.other">-->

<!--            <a-avatar :image-url="i.src" />-->

<!--            <span>{{i.name}}</span>-->

<!--            <a-button status="danger" @click="delParticipants(i)">-->
<!--              <icon-close/>-->
<!--            </a-button>-->

<!--          </div>-->

<!--        </div>-->

      </div>

      <a-form :model="activeDto" >

<!--        <a-form-item label="主办方信息"  >-->

<!--        </a-form-item>-->

<!--        <a-form-item label="头像"  >-->
<!--          <a-avatar @click="selectMainAvatar" :image-url="participants.main.src" :style="{ backgroundColor: '#7BC616' }" >主办方</a-avatar>-->
<!--        </a-form-item>-->

<!--        <a-form-item label="名称">-->
<!--          <a-input v-model="participants.main.name" />-->
<!--        </a-form-item>-->

<!--        <a-form-item label="上传">-->
<!--          <a-button @click="uploadMainInfo">上传</a-button>-->
<!--        </a-form-item>-->

<!--        <a-divider/>-->

<!--        <a-form-item label="特邀嘉宾信息">-->

<!--        </a-form-item>-->

<!--        <a-form-item label="头像" >-->
<!--          <a-avatar @click="selectOtherAvatar" :image-url="otherInfo.src" :style="{ backgroundColor: '#7BC616' }" >嘉宾</a-avatar>-->
<!--        </a-form-item>-->

<!--        <a-form-item label="名称">-->
<!--          <a-input v-model="otherInfo.name" />-->
<!--        </a-form-item>-->

<!--        <a-form-item label="添加">-->
<!--          <a-button shape="circle" @click="addParticipants" type="primary">-->
<!--            <icon-plus />-->
<!--          </a-button>-->
<!--        </a-form-item>-->

        <a-form-item label="活动状态:">
          <a-select v-model="activeDto.status" :default-value="3">
            <a-option :value="0">结束</a-option>
            <a-option :value="1">发布</a-option>
            <a-option :value="2">未发布</a-option>
            <a-option :value="3">编辑中</a-option>
            <a-option :value="4">隐藏 </a-option>
          </a-select>
        </a-form-item>

      </a-form>
    </div>


    <template #footer>
      <a-button @click="clickCancelHandler">{{events[curEvent - 1].cancelText}}</a-button>
      <a-button type="primary" @click="clickOkHandler" :loading="events[curEvent - 1].loading" >{{events[curEvent - 1].okText}}</a-button>
    </template>

  </a-modal>
</template>

<style scoped lang="scss">

.info {
  .info-item {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 10px 0;
  }
  display: flex;
  flex-direction: column;
}

.box {
  .pre{
    min-width: 300px;
  }
  display: flex;
}
</style>